<template>
  <div class="hello">
    {{list}}
    <ul v-for="item in list">
      <li>{{item.id}}</li>
      <li>{{item.name}}</li>
      <li>{{item.age}}</li>
      <li><img :src="item.url" ></li>
    </ul>
    <form>
      <input type="text" name="username" v-model="userName"> <br>
      <input type="text" name="age" v-model="age"> <br>
      <a href="javascript:;" @click="addUser">提交</a>
    </form>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        userName: '',
        age: '',
        list:[],
      }
    },
    mounted(){
      this.getUser()
    },
    methods: {
      addUser() {
        var name = this.userName;
        var age = this.age;
        this.$http.post('/api/user/addUser', {
          username: name,
          age: age
        },{}).then((response) => {
          console.log(response);
        })
      },
      getUser() {
        this.$http.get('/api/user/home').then((response) => {
            this.list=response.data;

        })
      },


    }
  }
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
